<template>
	<view class="nav-wrap">
		<!-- <Drawer /> -->
		<view class="nav-item" v-focusable v-for="(nav, index) in navList" >{{ nav.label }}</view>
	</view>
</template>

<script setup>
	import Drawer from '@/component/drawer/drawer.vue'
	import { ref, onMounted, getCurrentInstance  } from 'vue';
	const navList = ref([{
		label: "首页",
		value: 'home'
	}, {
		label: "电影",
		value: 'movie'
	}])
	onMounted(() => {
		const { proxy, ctx } = getCurrentInstance(); 
		proxy.$tv.requestFocus(document.querySelectorAll('.nav-item')[0])
	})
</script>

<style lang="scss">
.nav {
	&-wrap {
		height: 150upx;
		background: rgba(255, 255, 255, 0.2);
		display: flex;
		align-items: center;
	}
	&-item {
		padding: 50upx;
		font-size: 50upx;
		font-weight: bold;
		transition: color .2s;
		&.focus {
			color: #00A1F5;
			transform: scale(1.3);
		}
	}
}
</style>
